<template>
  <div>
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      clearable
      placeholder="请输入搜索关键词"
    >
      <template #label>
        <span @click="$router.push('/city')">{{city.label}}</span>
        <i class="line"></i>
      </template>
    </van-search>
    <div class="ditu" @click="$router.push('/map')">
      <i class="iconfont icon-ditu"></i>
    </div>
    <!-- 轮播图 -->
    <van-swipe
      class="my-swipe"
      height="210px"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item
        v-for="item in swiperList"
        :key="item.id"
      >
        <img
          :src="baseurl + item.imgSrc"
          alt
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 分类宫格 -->
    <van-grid
      :border="false"
      :column-num="4"
      center
      class="classify"
    >
      <van-grid-item>
        <div class="circle">
          <van-icon
            name="home-o"
            color="#1bb676"
            size="30"
          />
        </div>整租
      </van-grid-item>
      <van-grid-item>
        <div class="circle">
          <van-icon
            name="friends-o"
            color="#1bb676"
            size="30"
          />
        </div>合租
      </van-grid-item>
      <van-grid-item>
        <div class="circle">
          <van-icon color="#1bb676">
            <i class="iconfont icon-weizhi"></i>
          </van-icon>
        </div>地图找房
      </van-grid-item>
      <van-grid-item>
        <div class="circle">
          <van-icon color="#1bb676">
            <i class="iconfont icon-chuzu"></i>
          </van-icon>
        </div>去租房
      </van-grid-item>
    </van-grid>
    <!-- 租房小组 -->
    <div class="title">
      <h3>租房小组</h3>
      <a href="javascript:;">更多</a>
    </div>
    <!-- 租房小组 -->
    <van-grid
      :border="false"
      :column-num="2"
      class="group"
    >
      <van-grid-item
        style="flex-basis: 48.5%;"
        v-for="item in groupList"
        :key="item.id"
      >
        <div class="text">
          <p>{{item.title}}</p>
          <p>{{item.desc}}</p>
        </div>
        <van-image :src="baseurl + item.imgSrc" />
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { swiper, group } from '@/apis/home'
import { mapState } from 'vuex'
export default {
  name: 'home-page',
  components: {},
  props: {},
  data () {
    return {
      value: '',
      swiperList: [],
      groupList: []
    }
  },
  computed: {
    ...mapState(['baseurl']),
    ...mapState('city', ['city'])
  },
  watch: {},
  async created () {
    const { data } = await swiper()
    this.swiperList = data.body
    const res = await group()
    this.groupList = res.data.body
  },
  methods: {
  }
}
</script>

<style scoped lang='less'>
.van-search {
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 15px;
  background-color: transparent;
  padding-left: 20px;
  padding-right: 45px;
  span {
    margin-right: 18px;
    position: relative;
    left: -8px;
    &::before {
      content: "";
      position: absolute;
      top: 40%;
      left: 110%;
      display: block;
      width: 0;
      height: 0;
      border: 4px solid #999;
      border-bottom: 4px solid transparent;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
    }
  }
  .line {
    display: inline-block;
    margin-right: 4px;
    width: 1px;
    height: 15px;
    background-color: #aaa;
    transform: translateY(2px);
  }
}
.ditu {
  position: absolute;
  top: 28px;
  right: 8px;
  z-index: 1;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  border: 2.5px solid #fff;
  .iconfont {
    color: #fff;
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  img {
    width: 100%;
  }
}
.van-grid.classify .van-grid-item {
  background-color: #fff;
  font-size: 14px;
  .circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #daf7ea;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    .iconfont {
      font-size: 30px;
    }
  }
}
.title {
  padding: 0 10px 0 15px;
  margin: 15px 0;
  height: 18px;
  h3 {
    font-size: 15px;
    float: left;
    color: #333;
  }
  a {
    float: right;
    font-size: 14px;
    color: #888;
  }
}
.van-grid.group {
  justify-content: space-between;
  padding: 0 10px;
  /deep/.van-grid-item {
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #fff;
    overflow: hidden;
    display: block;
    .van-grid-item__content {
      display: block;
      padding: 5px;
      img {
        width: 50px;
        height: 50px;
        float: left;
      }
      .text {
        float: right;
        margin-right: 20px;
        p {
          font-size: 14px;
        }
      }
    }
  }
}
</style>
